深入理解ES6之《用模块封装代码》

什么是模块

模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码

1. 在模块的顶部this的值是undefined
2. 其模块不支持html风格的代码注释
   除非用default关键字，否则不能用这个语法导出匿名函数或类

任何未显示导出的变量、函数或类都是模块私有的，无法从模块外部访问

import {identifier1,identifier2} from './example.js'

import大括号表示给定模块导入的绑定，文件必须把文件扩展名也加上扩展名
导入绑定的列表看起来与解构对象很相似，但它不是
当从模块中导入一个绑定时，它就好像使用const定义的一样
不管是在import语句中把一个模块写了多少次，该模块将只招待一次。导入模块的代码执行后，实例化过的模块被保存在内存中，只要另一个import语句引用它就可以重复使用它
export和import的一个重要的限制是它们必须在其它语句和函数之外使用，也就是说不允许出现在if语句中，不能有条件导出或以任何方式动态导出。模块语法存在的一个原因是让js引擎静态确定哪些可以导出，因此只能在模块顶部使用export
export、import都可以用as来重命名导出的函数名
为默认导出值指定标识符指定重命名语法：

function sum(num1, num2) {
  return num1 + num2
}
//export default sum
export { sum as default }

看下面这个例子：

export let color = 'red'
export default function (num1, num2) {
  return num1 + num2
}


import sum,{color} from './example.js'

import 和export 组合使用

export {sum as add } from './example.js'

<script type="module"执行时自动应用defer属性，模块文件开始下载，直到文档被完全解析模块才会执行，模块按照它们出现在html文件中的顺序执行
async属性也可以应用在模块上，async属性会让模块以类似于脚本的方式执行，唯一的区别是在模块执行前，模块中所有的导入资源必须下载下来，这可以确保只有当模块招待所需的所有资源都下载完成后才执行模块，但不能保证是模块的招待时机

浏览器模块说明符解析

1. 以/开头的解析为以根目录开始
2. 以./开头的解析为以当前目录开始
3. 以../开头的解析为从父目录开始